<template>
  <div class="changepwd-container">
    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>变更密码</span>
      </ul>
    </el-row>

    <div class="content">
      <table class="myTable">
        <tbody>
          <tr>
            <td class="deepColor">
              旧密码
            </td>
            <td>
              <input type="password" v-model="changePwdForm.oldpassword">
            </td>
          </tr>
          <tr>
            <td class="deepColor">
              新密码
            </td>
            <td>
              <input type="password" v-model="changePwdForm.password">＊6-20字符必须由大小写字母和数字组合组成
            </td>
          </tr>
          <tr>
            <td class="deepColor">
              确认新密码
            </td>
            <td>
              <input type="password" v-model="changePwdForm.repassword">
            </td>
          </tr>
        </tbody>
      </table>

        <button @click="handleChange" class="btn">
          确定修改
        </button>

    </div>

  </div>
</template>

<script>
  import { Message } from 'element-ui'

  export default {
    name: 'changepwd',
    data() {
      return {
        loading: false,
        pwdType: 'password',
        errorMsg: '',
        changePwdForm: {
          oldpassword: '',
          password: '',
          repassword: '',
        },
        changeRules: {
          oldpassword: [
            {
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入旧密码',
            },
          ],
          password: [
            {
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入新密码',
            },
            {
              min: 6,
              max: 10,
              trigger: 'change',
              message: '长度在6-10位',
            },
            {
              pattern: /^[a-zA-Z0-9]+$/,
              trigger: 'blur',
              message: '只能输入英文字符和数字',
            },
          ],
          repassword: [
            {
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请确认密码',
            },
            {
              min: 6,
              max: 10,
              trigger: 'change',
              message: '长度在6-10位',
            },
            {
              // 自定义验证
              validator: (rule, value, callback) => {
                if (value !== this.changePwdForm.password) {
                  callback(new Error('两次输入的密码不一致!'))
                } else {
                  callback()
                }
              },
              trigger: 'blur',
            },
          ],
        },
      }
    },

    methods: {
      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
      checkConfirm(param) {
        // 验证新密码是否一致
      },
      handleChange() {
        this.$store
          .dispatch('ChangePwd', { ChangePwdForm: this.changePwdForm })
          .then(response => {
            this.loading = false
            this.errorMsg = ''
            if (response.status) {
              // 修改成功
              Message.success('修改成功,请重新登录')
              // 清空状态,重新登录
              this.$store
                .dispatch('FedLogOut')
                .then(this.$router.push({ path: '/login' }))
            } else {
              // 修改失败
              alert(response.message)
            }
          })
          .catch(() => {
            this.loading = false
          })
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }


  .content{
    padding: 10px;
    text-align: center;
  }
  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
    text-align: left;
  }

  .deepColor{
    background-color: #F2F2F2;
    text-align: right !important;
  }
  .btn{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -134px;
    border: 0px;
  }
  .btn:hover{
    color: #fff100;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -165px;
  }

</style>
